<!--
*  2021-03-15
*  坯布汇总
-->
<template>
  <div id="app" class="cloth-store">
    <!-- 头部导航 -->
    <van-nav-bar
      ref="header"
      left-arrow
      title="坯布汇总"
      @click-left="onClickLeft"
      left-text="返回"
    >
    </van-nav-bar>
    <!-- 筛选 -->
    <van-search v-model="designNo" placeholder="请输入搜索关键词" />
    <!-- 滚动 -->
    <better-scroll
      class="public-scroll"
      :data="tableData"
      :totalPage="totalPage"
      :pulldown="true"
      @pulldown="onGetClothStoreCheck"
    >
      <van-cell-group v-show="tableData.length !== 0">
        <div v-for="(data, index) in tableData" :key="index">
          <van-cell
            :title="data.designNo"
            :label="'实际库存: ' + data.totalNum"
            class="start-cell"
            @click="onClickDetails(data)"
          >
            <template>
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: flex-end;
                  justify-content: space-between;
                "
              >
                <span>预计库存：{{ data.expectNum }}</span>
                <span>流程数：{{ data.producingNum }}</span>
              </div>
            </template>
          </van-cell>
        </div>
      </van-cell-group>
      <van-empty
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        v-show="tableData.length === 0"
        description="暂无数据"
      />
    </better-scroll>
  </div>
</template>

<script>
import { openWin, comeBack, getFloat } from "@/utils/index";
import { getGreyClothViewList } from "@/api/cloth";

export default {
  name: "clothSum",
  data() {
    return {
      title: "",
      currentPage: 1,
      totalPage: 1,
      tableData: [],
      pageNum: 1,
      pageSize: 100,
      show: false,
      designNo: "",
      totalNum: 0,
    };
  },
  watch: {
    // 监听designNo
    designNo(newVal, oldVal) {
      // 防止input连续输入时，频繁发请求
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        // 异步请求
        if (oldVal !== newVal) {
          this.onGetClothStoreCheck();
        }
      }, 1000);
    },
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      this.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = function () {
        that.initFn(that);
      };
    }
  },
  methods: {
    getFloat,

    //初始化
    initFn(that) {
      that.onGetClothStoreCheck();
    },

    // 返回
    onClickLeft() {
      comeBack();
    },
    // 坯布汇总 // 下拉刷新
    onGetClothStoreCheck() {
      this.tableData = [];
      this.totalNum = 0;
      getGreyClothViewList(
        {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          designNo: this.designNo,
        },
        (res) => {
          this.tableData = res.list;
        }
      );
    },
    // 详情
    onClickDetails(data) {
      openWin('sum-details', {
        designNo: data.designNo,
        storeIds: data.storeIds,
      })
    }
  },
};
</script>

<style lang="scss">
.cloth-store {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .van-search {
    position: relative;
    z-index: 999;
  }
  .public-scroll {
    flex: 1;
    overflow: hidden;

    .van-cell {
      &:not(:nth-child(1)) {
        padding-top: 0;

        &:last-child {
          border-bottom: 1px solid #ddd !important;
        }

        .van-cell__value {
          flex: 0 0 70%;
          div {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            span {
              display: flex;
              flex: 1;
              justify-content: center;
              &:last-child {
                justify-content: flex-end;
              }
            }
          }
        }
      }
      &.start-cell {
        &.van-cell:not(:last-child)::after {
          border-bottom: none;
        }
        // .van-cell__title {
        //   font-weight: 600;
        //   color: #e4393c;
        // }
        // .van-cell__label {
        //   font-weight: 600;
        //   color: #e4393c;
        // }
        .van-cell__value {
          flex: 0 0 45%;
          div {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            span {
              display: flex;
              flex: 0 0 50%;
              justify-content: flex-end;
              // &.active {
              //   color: #e4393c;
              // }
            }
          }
        }
      }
    }
  }
}
</style>

